<template>
  <div class="hello">
    <div class="block">
      <span class="demonstration">默认</span>
      <el-date-picker
        v-model="currentTuan.startTime"
        type="datetime"
        placeholder="选择开始时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions0"
      >
      </el-date-picker>
      <el-date-picker
        v-model="currentTuan.endTime"
        type="datetime"
        placeholder="选择截止时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions1"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      currentTuan: {
        startTime: '',
        endTime: ''
      },
      startTimeRange: null,
      endTimeRange: null
    }
  },
  watch: {
    startTime: {
      handler(newValue) {
        if (newValue) {
          let nowDate = this.format(new Date(), "-");
          let dt = nowDate.split(" ");
          let st = "";
          if (newValue.split(" ")[0] == dt[0]) {
            // 是今天,选择 的时间开始为此刻的时分秒
            st = dt[1];
          } else {
            // 明天及以后从0时开始
            st = "00:00:00";
          }
          //例如：如果今天此刻时间为10:41:40 则选择时间范围为： 10:41:40 - 23:59:59
          //否则为：00:00:00- 23:59:59
          this.startTimeRange = st + " - 23:59:59";
        }
      },
    },
    endTime: {
      handler(newValue) {
        if (newValue) {
          let zt = this.currentTuan.startTime.split(" "); //开始日期
          let st = "";
          //如果开始日期和结束日期都选择当天
          if (newValue.split(" ")[0] == zt[0]) {
            st = zt[1];
          } else {
            st = "00:00:00";
          }
          this.endTimeRange = st + " - 23:59:59";
        }
      },
    },
  },
  computed: {
    pickerOptions0() {
      return {
        disabledDate: (time) => {
          if (this.currentTuan.endTime) {
              return time.getTime() > new Date(this.currentTuan.endTime).getTime() || time.getTime() < Date.now() - 8.64e7
          }else{
              return time.getTime() < Date.now() - 8.64e7
          }
        },
        selectableRance: this.startTimeRange
      }
    },
    pickerOptions1() {
      return {
        disabledDate: (time) => {
          if(this.currentTuan.startTime){
            return time.getTime() < new Date(this.currentTuan.startTime).getTime() - 1 * 24 * 60 * 60 * 1000
          }else {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      }
    },
  },
  methods: {
    format(Date, str) {
      var obj = {
        Y: Date.getFullYear(),
        M: Date.getMonth() + 1,
        D: Date.getDate(),
        H: Date.getHours(),
        Mi: Date.getMinutes(),
        S: Date.getSeconds(),
      };
      // 拼接时间 hh:mm:ss
      var time =
        " " +
        this.supplement(obj.H) +
        ":" +
        this.supplement(obj.Mi) +
        ":" +
        this.supplement(obj.S);
      // yyyy-mm-dd
      if (str.indexOf("-") > -1) {
        return (
          obj.Y +
          "-" +
          this.supplement(obj.M) +
          "-" +
          this.supplement(obj.D) +
          time
        );
      }
      // yyyy/mm/dd
      if (str.indexOf("/") > -1) {
        return (
          obj.Y +
          "/" +
          this.supplement(obj.M) +
          "/" +
          this.supplement(obj.D) +
          time
        );
      }
    },
    //时间不是两位数的第一位用零占位
    supplement(nn) {
      return (nn = nn < 10 ? "0" + nn : nn);
    },
    deepClone(obj){
      let objClone = Array.isArray(obj)?[]:{};
      if(obj && typeof obj==="object"){
        for(let key in obj){
          // eslint-disable-next-line no-prototype-builtins
          if(obj.hasOwnProperty(key)){
            //判断ojb子元素是否为对象，如果是，递归复制
            if(obj[key]&&typeof obj[key] ==="object"){
              objClone[key] = this.deepClone(obj[key]);
            }else{
              //如果不是，简单复制
              objClone[key] = obj[key];
            }
          }
        }
      }
      return objClone;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
